<!--用户页!-->
<template>
    <div class="user">
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-form @submit="onSubmit">
                    <van-field
                        v-model="username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">提交</van-button>
                    </div>
                    </van-form>
                 </div>
                
            </div>
        </van-overlay>

  
       <div class="top">
           <p><img :src="imgsrc" alt="."></p>
           <h6 v-if="islogined">{{username}}</h6>
           <h6 v-else @click="show = true" >点击登录</h6>
           <van-icon @click="quit" :name="islogined == true ?'cross':'arrow' " color="white" />
         
       </div>
       <van-grid :column-num="3" square :border='false'>
            <van-grid-item v-for="item in userArr" :key="item.id" :icon="item.icon" :text="item.name" />
    
       </van-grid>
   </div>
</template>

<script>
import Cookie from 'js-cookie'
import { Dialog } from 'vant';
import img from '../assets/images/touxiang.png'
import {postLogin} from '@/utils/https.js'
export default {
data(){
    return{
        userArr:[
            {id:1,name:'我的订单', icon:'label-o'},
            {id:2,name:'优惠券', icon:'bill-o'},
            {id:3,name:'礼品卡', icon:'gift-o'},
            {id:4,name:'我的收藏', icon:'star-o'},
            {id:5,name:'我的足迹', icon:'flag-o'},
            {id:6,name:'会员福利', icon:'manager-o'},
            {id:7,name:'地址管理', icon:'aim'},
            {id:8,name:'账号安全', icon:'warn-o'},
            {id:9,name:'联系客服', icon:'service-o'},
            {id:10,name:'帮助中心', icon:'question-o'},
            {id:11,name:'意见反馈', icon:'smile-comment-o'},
        ],
        imgsrc:img,
        islogined:false,
        show :false,
        username: '',
        password: '',
        status:'',
       
    }
},
methods:{
    onSubmit(values) {
      console.log(values);
    //   console.log(this.username);
    //   this.username = values.用户名
    //   console.log(this.password);
    //   this.password = values.密码
     postLogin({username:this.username , pwd:this.password}).then((res)=>{
          console.log(res);
         
        if(res.data.errno === 0){
          this.$toast.success('恭喜登录成功');
          this.show = false
          this.islogined = true
          this.imgsrc = res.data.data.userInfo.avatar
          console.log(this);
      //   localStorage.setItem('user', JSON.stringify({name:this.username , pwd:this.password}))
          Cookie.set('token',  res.data.data.token)
          
          localStorage.setItem('user' , JSON.stringify(res.data.data.userInfo)  )
        }else if(res.data.errno === 602){
            this.$toast.fail('账号或密码错误，请重新登录');
            console.log('登录错误');
        }
      })
    
    },
    quit(){
            if(this.islogined === false){
                
                  this.show = true

            }else if(this.islogined ===  true){

                   Dialog.confirm({

                        title: '退出账号确认',
                        message: '你确定想要退出当前账号吗？',
                    })
                    .then(() => {

                        this.islogined = false
                        this.imgsrc = img
                        localStorage.removeItem('user')  
                        Cookie.remove('token')    
                        // on confirm
                    })
                    .catch(() => {

                        // on cancel

                    });
                
                    }
                
       
    },

 
  },
  created(){
       let user = JSON.parse(localStorage.getItem('user'))
        if(user){
        this.username = user.username
        this.imgsrc = user.avatar
        this.islogined = true   
        }else{
            return
        }
     
     
      
      
      
  }

}
</script>

<style  lang='less' scoped>
.user{
     .wrapper {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto; 
        display: flex;
        align-items: center;
        justify-content: center;
        height: 37%;

          .block {
                padding-top: 40px;
                width: 335px;
                height: 200px;
                background-color: #fff;
          }
     }
    .top{
        width: 100%;
        background: rgb(63, 61, 61);
        display: flex;
        height: 110px;
        align-items: center;
        // justify-content: space-between;
        p{
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            img{
                width: 100%;
            }
            margin: 0 10px;
        }
        h6{
            color: white;
            font-size: 16px;
        }
        .van-icon{
            position: absolute;
            right: 15px;
            font-size: 16px;
        }
    }
}
</style>